<template>
  <view>
    <t-cell
      v-if="showCell"
      :title="title"
      arrow
      :note="valueModel"
      @click="show"
    />

    <t-popup v-model="visibleModel" placement="bottom">
      <t-date-time-picker
        v-model="valueModel"
        mode="minute"
        title="选择日期"
        format="YYYY-MM-DD HH:mm"
        @confirm="handleConfirm"
        @cancel="onCancel"
      />
    </t-popup>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { useVModel } from "@vueuse/core";
import { isBoolean } from "lodash-es";

const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  showCell: {
    type: Boolean,
    default: true,
  },
  visible: {
    type: [String, Boolean],
    default: "",
  },

  disabled: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "区间选择日期",
  },
});
const emits = defineEmits(["update:value", "update:visible", "change"]);

const valueModel = useVModel(props, "value", emits);

const visibleModel = isBoolean(props.visible)
  ? useVModel(props, "visible", emits)
  : ref(false);

const handleConfirm = (val) => {
  // console.log("选择：", val);
  visibleModel.value = false;
  emits("change", val);
};

const onCancel = () => {
  visibleModel.value = false;
};

const show = () => {
  if (props.disabled) return;

  visibleModel.value = true;
};

// const handleSelect = (val) => {
//   console.log(val);
// };
// const onClose = (trigger) => {
//   console.log("closed by", trigger);
// };
</script>

<style lang="less" scoped></style>
